<!DOCTYPE html>
<%@ page
	language="java"
	contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	int rowNum = 12;
	if (null != request.getParameter("rows")) {
		rowNum = (int) Integer.valueOf(request.getParameter("rows"));
	}

	int colNum = 12;
	if (null != request.getParameter("cols")) {
		colNum = (int) Integer.valueOf(request.getParameter("cols"));
	}
%>
<html>
<head>
<meta
	http-equiv="Content-Type"
	content="text/html; charset=EUC-KR">
<title>dotDesign</title>
<link
	rel="stylesheet"
	href="/d2/_css/dotDesign.css" />
<script src="/d2/_js/common.js"></script>
<script src="/d2/_js/dotDesign.js"></script>
<script src="/d2/_js/ajax.js"></script>
<script src="/d2/_js/ajaxForSql2.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body id="dotDesign">
	<div>
		<div id="comment"></div>
		<form
			method="post"
			action="./dotCtrl.jsp">
			<div id="controlers">
				<fieldset>
					<legend> 공통 </legend>
					<table class="specTable">
						<tr>
							<td class="d2">가로</td>
							<td
								id="cols"
								class="d3"><input
								type="button"
								id="removeCol"
								value="-" /> <input
								id="colNum"
								value="8"
								READONLY="readonly" /> <input
								type="button"
								id="addCol"
								value="+"></td>
						</tr>
						<tr>
							<td>세로</td>
							<td id="rows"><input
								type="button"
								id="removeRow"
								value="-" /> <input
								id="rowNum"
								value="8"
								READONLY="readonly" /> <input
								type="button"
								id="addRow"
								value="+" /></td>
						</tr>
						<tr>
							<td>셀 간격 <span id="exCellMargin">▼</span></td>
							<td><div class="styled-select">
									<select id="cMargin">
										<option value="0px">0px * 0px</option>
										<option value="1px">1px * 1px</option>
										<option value="2px">2px * 2px</option>
										<option value="4px">4px * 4px</option>
										<option value="8px">8px * 8px</option>
										<option value="16px">16px * 16px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trMarginRight"
							class="detailAdjustment">
							<td>├ 셀 가로 간격</td>
							<td><div class="styled-select">
									<select id="cMarginRight">
										<option value="0px">0px</option>
										<option value="1px">1px</option>
										<option value="2px">2px</option>
										<option value="4px">4px</option>
										<option value="8px">8px</option>
										<option value="16px">16px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trMarginTop"
							class="detailAdjustment">
							<td>└ 셀 세로 간격</td>
							<td><div class="styled-select">
									<select id="cMarginTop">
										<option value="0px">0px</option>
										<option value="1px">1px</option>
										<option value="2px">2px</option>
										<option value="4px">4px</option>
										<option value="8px">8px</option>
										<option value="16px">16px</option>
									</select>
								</div></td>
						</tr>
						<tr>
							<td>셀 크기 <span id="exCellSize">▼</span></td>
							<td><div class="styled-select">
									<select id="cellSize">
										<option value="8px">8px * 8px</option>
										<option value="12px">12px * 12px</option>
										<option value="16px">16px * 16px</option>
										<option value="20px">20px * 20px</option>
										<option value="24px">24px * 24px</option>
										<option value="32px">32px * 32px</option>
										<option value="40px">40px * 40px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trCellWidth"
							class="detailAdjustment">
							<td>├ 셀 가로 크기</td>
							<td><div class="styled-select">
									<select id="cellWidth">
										<option value="8px">8px</option>
										<option value="12px">12px</option>
										<option value="16px">16px</option>
										<option value="20px">20px</option>
										<option value="24px">24px</option>
										<option value="32px">32px</option>
										<option value="40px">40px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trCellHeight"
							class="detailAdjustment">
							<td>└ 셀 세로 크기</td>
							<td><div class="styled-select">
									<select id="cellHeight">
										<option value="8px">8px</option>
										<option value="12px">12px</option>
										<option value="16px">16px</option>
										<option value="20px">20px</option>
										<option value="24px">24px</option>
										<option value="32px">32px</option>
										<option value="40px">40px</option>
									</select>
								</div></td>
						</tr>
						<tr>
							<td>보더 두께</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="borderWidthView_c"
										class="preview_Width"></div>
									<input
										id="borderWidth_c"
										class="selectorInput"
										READONLY="readonly" /> <input
										type="button"
										id="borderWidth_btn_c"
										class="btnEx" />
								</div>
								<ul
									id="borderWidth_c_Ex"
									class="ex">
									<li>
										<div class="borderWidth_0px"></div> <span>0px</span>
									</li>
									<li>
										<div class="borderWidth_1px"></div> <span>1px</span>
									</li>
									<li>
										<div class="borderWidth_2px"></div> <span>2px</span>
									</li>
									<li>
										<div class="borderWidth_4px"></div> <span>4px</span>
									</li>
									<li>
										<div class="borderWidth_8px"></div> <span>8px</span>
									</li>
									<li>
										<div class="borderWidth_12px"></div> <span>12px</span>
									</li>
									<li>
										<div class="borderWidth_16px"></div> <span>16px</span>
									</li>
								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>활성화</legend>
					<table class="specTable">
						<tr>
							<td class="d2">색상</td>
							<td class="d3"><input
								id="colorPicker_acc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBGCA"></div></td>
						</tr>
						<tr>
							<td>보더 색상</td>
							<td><input
								id="colorPicker_acbc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBCA"></div></td>
						</tr>
						<tr>
							<td>보더 타입</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="borderStyle_a_View"
										class="preview_Style"></div>
									<input
										id="borderStyle_a"
										class="selectorInput"
										READONLY="readonly" /> <input
										type="button"
										id="btn_borderStyle_a"
										class="btnEx" />
								</div>
								<ul
									id="borderStyle_a_Ex"
									class="ex">
									<li>
										<div class="borderStyle_Solid"></div> <span>solid</span>
									</li>
									<li>
										<div class="borderStyle_Dotted"></div> <span>dotted</span>
									</li>
									<li>
										<div class="borderStyle_Dashed"></div> <span>dashed</span>
									</li>
									<li>
										<div class="borderStyle_Double"></div> <span>double</span>
									</li>
									<li>
										<div class="borderStyle_Inset"></div> <span>inset</span>
									</li>
									<li>
										<div class="borderStyle_Outset"></div> <span>outset</span>
									</li>
									<li>
										<div class="borderStyle_Groove"></div> <span>groove</span>
									</li>
								</ul>
							</td>
						</tr>
						<tr>
							<td>라운드 타입</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="roundStyleView_a"
										class="preview_Style"></div>
									<input
										id="roundStyle_a"
										class="selectorInput"
										READONLY="readonly" /> <input
										type="button"
										id="btn_roundStyle_a"
										class="btnEx" />
								</div>
								<ul
									id="roundStyle_a_Ex"
									class="ex">
									<li>
										<div class="roundStyle_0px"></div> <span>0px</span>
									</li>
									<li>
										<div class="roundStyle_1px"></div> <span>1px</span>
									</li>
									<li>
										<div class="roundStyle_2px"></div> <span>2px</span>
									</li>
									<li>
										<div class="roundStyle_3px"></div> <span>4px</span>
									</li>
									<li>
										<div class="roundStyle_6px"></div> <span>6px</span>
									</li>
									<li>
										<div class="roundStyle_8px"></div> <span>8px</span>
									</li>
									<li>
										<div class="roundStyle_12px"></div> <span>12px</span>
									</li>

								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>비활성화</legend>
					<table class="specTable">
						<tr>
							<td class="d2">색상</td>
							<td class="d3"><input
								id="colorPicker_dcc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBGCI"></div></td>
						</tr>
						<tr>
							<td>보더 색상</td>
							<td class="d3"><input
								id="colorPicker_dcbc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBCI"></div></td>
						</tr>
						<tr>
							<td>보더 타입</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="borderStyleView_i"
										class="preview_Style"></div>
									<input
										id="borderStyle_i"
										value="solid"
										class="selectorInput"
										READONLY="readonly" /> <input
										type="button"
										id="btn_borderStyle_i"
										class="btnEx" />
								</div>
								<ul
									id="borderStyle_i_Ex"
									class="ex">
									<li>
										<div class="borderStyle_Solid"></div> <span>solid</span>
									</li>
									<li>
										<div class="borderStyle_Dotted"></div> <span>dotted</span>
									</li>
									<li>
										<div class="borderStyle_Dashed"></div> <span>dashed</span>
									</li>
									<li>
										<div class="borderStyle_Double"></div> <span>double</span>
									</li>
									<li>
										<div class="borderStyle_Inset"></div> <span>inset</span>
									</li>
									<li>
										<div class="borderStyle_Outset"></div> <span>outset</span>
									</li>
									<li>
										<div class="borderStyle_Groove"></div> <span>groove</span>
									</li>
								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>패널</legend>
					<table class="specTable">
						<tr>
							<td class="d2">색상</td>
							<td class="d3"><input
								id="colorPicker_pc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBGCP"></div></td>
						</tr>
						<tr>
							<td class="d2">보더 색상</td>
							<td class="d3"><input
								id="colorPicker_pbc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBCP"></div></td>
						</tr>
						<tr>
							<td>보더 타입</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="borderStyleView_p"
										class="preview_Style"></div>
									<input
										id="borderStyle_p"
										value="solid"
										class="selectorInput"
										READONLY="readonly" /> <input
										type="button"
										id="btn_borderStyle_p"
										class="btnEx" />
								</div>
								<ul
									id="borderStyle_p_Ex"
									class="ex">
									<li>
										<div class="borderStyle_Solid"></div> <span>solid</span>
									</li>
									<li>
										<div class="borderStyle_Dotted"></div> <span>dotted</span>
									</li>
									<li>
										<div class="borderStyle_Dashed"></div> <span>dashed</span>
									</li>
									<li>
										<div class="borderStyle_Double"></div> <span>double</span>
									</li>
									<li>
										<div class="borderStyle_Inset"></div> <span>inset</span>
									</li>
									<li>
										<div class="borderStyle_Outset"></div> <span>outset</span>
									</li>
									<li>
										<div class="borderStyle_Groove"></div> <span>groove</span>
									</li>
								</ul>
							</td>
						</tr>
						<tr>
							<td>보더 두께</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="borderWidthView_p"
										class="preview_Width"
										class="borderWidthView"></div>
									<input
										id="borderWidth_p"
										class="selectorInput"
										value="4px"
										READONLY="readonly" /> <input
										type="button"
										id="btn_borderWidth_p"
										class="btnEx" />
								</div>
								<ul
									id="borderWidth_p_Ex"
									class="ex">
									<li>
										<div class="borderWidth_0px"></div> <span>0px</span>
									</li>
									<li>
										<div class="borderWidth_1px"></div> <span>1px</span>
									</li>
									<li>
										<div class="borderWidth_2px"></div> <span>2px</span>
									</li>
									<li>
										<div class="borderWidth_4px"></div> <span>4px</span>
									</li>
									<li>
										<div class="borderWidth_8px"></div> <span>8px</span>
									</li>
									<li>
										<div class="borderWidth_12px"></div> <span>12px</span>
									</li>
									<li>
										<div class="borderWidth_16px"></div> <span>16px</span>
									</li>
								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>눈금자</legend>
					<table class="specTable">
						<tr>
							<td class="d2">cm</td>
							<td class="d3"><input
								type="button"
								id="rulerCm"
								value="cm"
								onclick="rule('cm')" /></td>
						</tr>
						<tr>
							<td>px</td>
							<td><input
								type="button"
								id="rulerPx"
								value="px"
								onclick="rule('px')" /></td>
						</tr>
					</table>
				</fieldset>
				<input
					id="btn_capture"
					type="button"
					value="capture" />
				<table
					id="clientInfo"
					class="specTable">
					<tr>
						<td><%=rowNum%></td>
						<td><%=colNum%></td>
					</tr>
					<tr>
						<td class="d2">브라우져 코드</td>
						<td class="d3"><span id="appCode"></span></td>
					</tr>
					<tr>
						<td>브라우저 이름</td>
						<td><span id="appName"></span></td>
					</tr>
					<tr>
						<td>브라우저 버전</td>
						<td><span id="appVer"></span></td>
					</tr>
					<tr>
						<td>사용 언어</td>
						<td><span id="appLang"></span></td>
					</tr>
					<tr>
						<td>시스템 코드</td>
						<td><span id="sysCode"></span></td>
					</tr>
					<tr>
						<td>UserAgent</td>
						<td><span id="userAgent"></span></td>
					</tr>
					<tr>
						<td>스크립트 가능 유무</td>
						<td><span id="scriptEnabled"></span></td>
					</tr>
					<tr>
						<td>오류 유무</td>
						<td><span id="taintEnabled"></span></td>
					</tr>
				</table>
				<input
					type="button"
					value="new"
					onclick='newPlace()' /> <input
					type="button"
					id="btnRotate"
					value="R"
					onclick="rotate();" /> <input
					id="textInput"
					type="text"
					value="sample text"> <select id="fontSelector">
					<option>font1</option>
					<option>font2</option>
					<option>font3</option>
					<option>font4</option>
					<option>font5</option>
					<option>font6</option>
					<option>font7</option>
				</select> <input type="submit" />
			</div>
			<div id="worker">
				<div id="placeRow">
					<%/*
						String style = new String();
						for (int row = 0; row < 31; row++) {
							out.println("<div class='ruler_row_R'></div>");
						}

						for (int row = 0; row < (rowNum * 24) + 24; row++) {
							String num = new String();
							if (row % 100 == 0) {
								style = "ruler_row_R100";
								num = Integer.toString(row);
							} else if (row % 20 == 0) {
								style = "ruler_row_R20";
							} else if (row % 10 == 0) {
								style = "ruler_row_R10";
							} else {
								style = "ruler_row_R";
							}
							out.println("<div class='" + style + "'><span class='gridNum'>"
									+ num + "</span></div>");
						}
					*/%>
				</div>
				<div id="placeCol">
					<%/*
					String style = new String();
						for (int col = 1; col < colNum * 24; col++) {
							String num = new String();
							if (col % 100 == 0) {
								style = "ruler_col_B100";
							} else if (col % 20 == 0) {
								style = "ruler_col_B20";
							} else if (col % 10 == 0) {
								style = "ruler_col_B10";
							} else if ((col - 2) % 100 == 0) {
								style = "ruler_col_B";
								num = Integer.toString(col - 2);
							} else {
								style = "ruler_col_B";
							}
							out.println("<div class='" + style + "'><span class='gridNum'>"
									+ num + "</span></div>");
						}
					*/%>
				</div>
				<div id="workerPanel"></div>
				<div id="hiddenPanel"></div>
			</div>
			<div class="hiddenData"></div>
		</form>
	</div>
</body>
</html>